﻿
@{
    ViewBag.Title = "Test";
}

<h2>Test</h2>

<div id="phpWordsPage" style="height:600px;width:100%;"></div>
<div id="phpKeyPage" style="height:600px;width:100%;"></div>
<div>
    <span>php职位技能推荐</span>
    <span id="phpKeySpan"></span><br />
    <span id="phpWordSpan"></span>
</div>
<div id="javaWordsPage" style="height:600px;width:100%;"></div>
<div id="javaKeyPage" style="height:600px;width:100%;"></div>
<div>
    <span>java职位技能推荐</span>
    <span id="javaKeySpan"></span><br/>
    <span id="javaWordSpan"></span>
</div>
<div id="netWordsPage" style="height:600px;width:100%;"></div>
<div id="netKeyPage" style="height:600px;width:100%;"></div>
<div>
    <span>net职位技能推荐</span>
    <span id="netKeySpan"></span><br/>
    <span id="netWordSpan"></span>
</div>

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/echarts.min.js"></script>
<script src="~/Scripts/echarts-wordcloud.js"></script>
<script>
    var phpWords, javaWords, netWords;

    phpKeysWord();
    javaKeysWord();
    netKeysWord();
    function phpKeysWord() {
        $.ajax({
            url: "/Json/PHP.json",
            dataType: "json",
            success: function (data) {
                console.log(data);
                phpWords = data;
                showPHPEchart();
                showEchart("phpKeyPage", phpWords);
                showKey("phpKeySpan", phpWords, 977.0);
                showWord("phpWordSpan", phpWords);
            },
            error: function (err) {
                console.log(err);
            }
        })
    }
    function javaKeysWord() {
        $.ajax({
            url: "/Json/JAVA.json",
            dataType: "json",
            success: function (data) {
                console.log(data);
                javaWords = data;
                showJavaEchart();
                showEchart("javaKeyPage", javaWords);
                showKey("javaKeySpan", javaWords, 1401.0);
                showWord("javaWordSpan", javaWords);
            },
            error: function (err) {
                console.log(err);
            }
        })
    }
    function netKeysWord() {
        $.ajax({
            url: "/Json/NET.json",
            dataType: "json",
            success: function (data) {
                console.log(data);
                netWords = data;
                showNETEchart();
                showEchart("netKeyPage", netWords);
                showKey("netKeySpan", netWords, 1156.0);
                showWord("netWordSpan", netWords);
            },
            error: function (err) {
                console.log(err);
            }
        })
    }

    function showKey(span, text, number) {
        var data = [];
        for (var item in text) {
            if (text[item].value / number > 0.5) {
                data.push(text[item].name);
            }
        }
        document.getElementById(span).innerText = data;
    }

    function showWord(span, text) {
        var data = [];
        var sum = 0;
        for (var item in text) {
            sum += text[item].value;
        }
        for (var item in text) {
            if (text[item].value / sum > 0.05) {
                data.push(text[item].name);
            }
        }
        document.getElementById(span).innerText = data;
    }

    function showPHPEchart() {
        var dom = document.getElementById("phpWordsPage");
        var myChart = echarts.init(dom);
        var option = {
            tooltip: {},
            series: [{
                type: 'wordCloud',
                gridSize: 2,
                sizeRange: [16, 80],
                rotationRange: [-90, 90],
                shape: 'cardioid',
                width: 800,
                height: 500,
                drawOutOfBound: true,
                textStyle: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    textStyle: {
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                data: phpWords
            }]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
            //window.onresize = chart.resize;
        }
    }
    function showEchart(span,text) {
        var dom = document.getElementById(span);
        var myChart = echarts.init(dom);
        var titel = [], value = [];
        for (var item in text) {
            titel.push(text[item].name);
            value.push(text[item].value);
        }
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    interval: 0
                },
                data: titel
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: value,
                    type: 'bar'
                }
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    }
    function showJavaEchart() {
        var dom = document.getElementById("javaWordsPage");
        var myChart = echarts.init(dom);
        var option = {
            tooltip: {},
            series: [{
                type: 'wordCloud',
                gridSize: 2,
                sizeRange: [16, 80],
                rotationRange: [-90, 90],
                shape: 'pentagon',
                width: 800,
                height: 600,
                drawOutOfBound: true,
                textStyle: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    textStyle: {
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                data: javaWords
            }]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
            //window.onresize = chart.resize;
        }
    }
    function showNETEchart() {
        var dom = document.getElementById("netWordsPage");
        var myChart = echarts.init(dom);
        var option = {
            tooltip: {},
            series: [{
                type: 'wordCloud',
                gridSize: 2,
                sizeRange: [16, 80],
                rotationRange: [-90, 90],
                shape: 'star',
                width: 800,
                height: 600,
                drawOutOfBound: true,
                textStyle: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    textStyle: {
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                data: netWords
            }]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
            //window.onresize = chart.resize;
        }
    }
</script>